@use "@base/assets/settings.scss" as settings;
@use "@base/assets/vuetify.scss" as vuetify;
@import '@base/assets/fonts/noto/noto.css';


// Hide scrollbar when it is not needed
// Overrides default Vuetify behavior
// See https://github.com/vuetifyjs/vuetify/issues/1197
html {
  overflow-y: auto !important;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark light;
  }
}

body {
  font-family: settings.$body-font-family;
  line-height: vuetify.$line-height-root;
  margin: 0;
}


.Vue-Toastification__toast--warning {
  // Vuetify warning color
  background-color: #FFC107 !important;
  color: black !important;

  .Vue-Toastification__close-button {
    color: black !important;
  }
}


// Vuetify overrides
.v-field--focused .v-field__outline {
  --v-field-border-opacity: var(--v-high-emphasis-opacity) !important;
}
.v-btn.v-btn--icon:not(.text-error, .v-btn--variant-flat):hover .v-icon, 
.v-breadcrumbs-item--link:hover {
  color: rgb(var(--v-theme-primary));
}
.v-text-field input.v-field__input {
  // opacity=0 prevents Bitwarden from auto-filling fields
  opacity: 1;
}


// CodeMirror overrides
.cm-searchMatch {
  background-color: rgba(var(--v-theme-search-match), 0.3) !important;
  color: rgb(var(--v-theme-on-search-match)) !important;
}
.cm-searchGlobalMatch {
  background-color: rgb(var(--v-theme-search-match)) !important;
  color: rgb(var(--v-theme-on-search-match)) !important;
}


// Utilities
.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.bg-inherit {
  background-color: inherit !important;
}

.flex-grow-height {
  flex-grow: 1;
  min-height: 0;
}

.flex-grow-width {
  flex-grow: 1;
  min-width: 0;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}


// Specific utility classes used by multiple comonents
// Highligh changed fields in diff views
.diff-highlight-changed {
  .v-field.v-field--variant-outlined {
    .v-field__outline {
      --v-field-border-width: 2px;
    }

    .v-field__outline__start, .v-field__outline__end, .v-field__outline__notch::before, .v-field__outline__notch::after {
      border-color: rgb(var(--v-theme-primary));
    }
  }
}
// Highlight nested fields
.field-highlight-nested1 {
  background-color: rgb(var(--v-theme-surface)) !important;
}
.field-highlight-nested2 {
  background-color: rgba(var(--v-theme-on-surface), 0.05) !important;
}

